<script setup>
	import { uniFetch } from '@/apis/uni-fetch.js'
	// 导入生命周期方法
	import { onMounted, ref } from 'vue'
	const userData = ref({})
	const taskData = ref({})
	onMounted(() => {
		// 1. 获取司机信息
		getInfo()

		// 2. 获取里程信息
		getTaskInfo()
	})

	async function getInfo() {
		try {
			let res = await uniFetch.get('/driver/users')
			// 1. 由于使用的是ref来定义的响应式数据，所以必须使用.value来进行读取和赋值
			userData.value = res.data.data // 最终要的是响应报文体中的data属性的值
			// console.log(res.data)
		} catch (err) {
			uni.utils.toast('失败了')
			console.log(err)
		}
	}
	async function getTaskInfo() {
		// /driver/users/taskReport
		let res = await uniFetch.get('/driver/users/taskReport', {
			year: '2024',
			month: '09',
			// 由于我的账号注册日期是9月，所以需要填写09，大家根据自己的注册日期来填写
		})

		// console.log('任务：', res)
		taskData.value = res.data.data
	}
</script>

<template>
	<view class="page-container">
		<view class="user-profile">
			<image class="avatar" :src="userData.avatar" mode=""></image>
			<text class="username">{{ userData.name }}</text>
			<text class="no">司机编号：{{ userData.number }}</text>
			<text class="mobile">手机号码：{{ userData.phone }}</text>
		</view>
		<view class="month-overview">
			<view class="title">我的任务</view>
			<view class="content">
				<view class="item">
					<text class="volumn">{{ taskData.taskAmounts }}</text>
					<text class="label">任务总量</text>
				</view>
				<view class="item">
					<text class="volumn">{{ taskData.completedAmounts }}</text>
					<text class="label">完成任务量</text>
				</view>
				<view class="item">
					<text class="volumn">{{ taskData.transportMileage }}</text>
					<text class="label">运输里程(km)</text>
				</view>
			</view>
		</view>
		<view class="entry-list">
			<uni-list :border="false">
				<uni-list-item to="/subpkg_user/truck/index" showArrow title="车辆信息" />
				<uni-list-item to="/subpkg_user/task/index" showArrow title="任务数据" />
				<uni-list-item to="/subpkg_user/settings/index" showArrow title="系统设置" />
			</uni-list>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>